<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <link href="../layui/css/layui.css">
    <title>layui分页测试</title>
</head>
<body>
<div id="test1">

    <table class="table table-striped">
        <thead>
        <th>城市名称</th>
        <th>城市编号</th>
        </thead>
        <tbody id="tbs">

        </tbody>
    </table>
</div>

<div id="demo1"></div>
</body>
<script>
    $(function(){
        fenye();
    })
    function fenye(){
        layui.use(['laypage', 'layer'], function(){
            var laypage = layui.laypage
                ,layer = layui.layer;
            //自定义排版
            $.ajax({
                type:'get',
                dataType:'json',
                data:{'page':1,'limit':10},
                url:'/DataShow',
                success:function(data){
                    showData1(data);
                    laypage.render({
                         elem: 'demo1'
                        ,count: data.ct
                        ,layout: ['limit', 'prev', 'page', 'next']
                        ,jump:function(obj){
                            //分页切换的回掉
                            $.ajax({
                                type:'get',
                                dataType:'json',
                                data:{'page':obj.curr,'limit':obj.limit},
                                url:'/DataShow',
                                success:function(data){
                                    showData1(data);
                                }
                            })
                        }
                    });
                }
            })
        });
    }
    function showData1(ds){
        $("#tbs").empty();
        var htmlStr="";
        for(var i=0;i<ds.data.length;i++){
            htmlStr+='<tr><td>';
            htmlStr+=ds.data[i].chinese;
            htmlStr+='</td><td>';
            htmlStr+=ds.data[i].adcode;
            htmlStr+='</td></tr>'

        }
        $("#tbs").append(htmlStr);
    }

</script>
</html>
